<script setup lang="ts">
  import { reactive, ref } from 'vue'
  import { dictionary, tableKeyList } from './conf'
  import { useRoute, useRouter } from 'vue-router';
  import { ResponseType } from '@/common/types/response';
  import SelectOrgan from './component/select-organ.vue';
  import SelectPosition from './component/select-position.vue'
  import { useCurrentInstance } from '@/common/utils/methods';

  const { query } = useRoute();
  const router = useRouter();
  const { $axios, $message, branchId, brandId } = useCurrentInstance();
  const data = reactive({
    list: [],
    getData: false,
    totalNum: 0,
    params: {
      branchId, brandId,
      planId: query.planId,
      strategy: 2,
    },
    showExaminee: true,
    activeName: 'select_0'
  })

  const toggleShowExaminee = () => {
    data.showExaminee = !data.showExaminee;
  }

  const select_0 = ref();
  const select_1 = ref();
  const select_2 = ref();
  const select_3 = ref();
  const select_4 = ref();
  const select_5 = ref();
  const select_6 = ref();
  const saveExaminee = () => {
    let nodes = [];
    switch(data.activeName){
      case 'select_0':
        nodes = select_0.value.getCheckedList();
        break;
      case 'select_1':
        nodes = select_1.value.getCheckedList();
        break;
      case 'select_2':
        nodes = select_2.value.getCheckedList();
        break;
      case 'select_3':
        nodes = select_3.value.getCheckedList(); 
        break; 
      case 'select_4':
        nodes = select_4.value.getCheckedList();
        break;
      case 'select_5':
        nodes = select_5.value.getCheckedList();  
        break;
      case 'select_6':
        nodes = select_6.value.getCheckedList();  
        break;  
      default:
        nodes = [];  
    }
    
    if (nodes.length === 0) {
      $message.error('请选择考生')
      return
    }

    interface nodeItemType {
      canExpand: number;
      [propName: string]: any
    }
    nodes = nodes.filter((item: nodeItemType) => item.canExpand === 1)

    $axios.post('/training.exam.api/plan/append/employeeNode', {
      ...data.params,
      employeeList: nodes,
      organType: data.activeName.split('_')[1]
    }).then((res: ResponseType) => {
      if (res.code === '200') {
        $message.success('操作成功');
        router.push({ path: '/exam/exams' });
      }
    })
  }

</script>

<template>
  <div>
    <div class="title">{{query['title']}}-考试配置</div>

    <div class="examinee" v-if="data.showExaminee">
      <ListView
        v-loading="data.getData"
        :tableKeyList="tableKeyList"
        :list="data.list"
        :dictionary="dictionary"
        fixed="none"
        :hasHandle="true"
      >
        <template #rightBtn>
          <el-button type="primary" icon="plus" @click="toggleShowExaminee">编辑</el-button>
        </template>
      </ListView>
      <Pagination
        url="/training.exam.api/plan/employee"
        v-model:list="data.list"
        v-model:getData="data.getData"
        :params="data.params"
        :autoLoad="true"
        @setTotalNum="(num: number) => (data.totalNum = num)"
      ></Pagination>
    </div>
    <div v-else>
      <p class="tip-required">仅可选择一个维度的考生，考试生成后不可修改</p>
      <el-tabs type="border-card" v-model="data.activeName">
        <el-tab-pane label="选择组织架构" name="select_0">
          <SelectOrgan :type="0" ref="select_0" v-if="data.activeName === 'select_0'"/>
        </el-tab-pane>
        <el-tab-pane label="选择行政线" name="select_2">
          <SelectOrgan :type="2" ref="select_2" v-if="data.activeName === 'select_2'"/>
        </el-tab-pane>
        <el-tab-pane label="选择营销线" name="select_1">
          <SelectOrgan :type="1" ref="select_1" v-if="data.activeName === 'select_1'"/>
        </el-tab-pane>
        <el-tab-pane label="选择组织架构职位">
          <SelectPosition :type="3" ref="select_3" v-if="data.activeName === 'select_3'"/>
        </el-tab-pane>
        <el-tab-pane label="选择行政线职位">Task</el-tab-pane>
        <el-tab-pane label="选择营销线职位">Task</el-tab-pane>
        <el-tab-pane label="指定考生">Task</el-tab-pane>
      </el-tabs>
      <div class="bottom-btn">
        <el-button @click="toggleShowExaminee">取消</el-button>
        <el-button type="primary" @click="saveExaminee">保存</el-button>
      </div>
    </div>
  </div>
</template>

<style scoped>
  .title {
    line-height: 22px;
    color: #333;
    font-size: 18px;
    border-left: 5px solid #3d88f2;
    padding-left: 10px;
    margin: 0 0 20px;
  }
  .tip-required {
    font-size: 12px;
    color: red;
    margin-bottom: 10px;
  }
  .tip-required:before {
    content: "*";
  }
  .bottom-btn {
    text-align: center;
    margin-top: 20px;
  }
</style>